<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生打印功能实现</title>
    <style>
        /* 页面样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            color: #333;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        /* 打印专用样式 */
        @media print {
            body {
                font-size: 14px;
                line-height: 1.6;
            }

            h2 {
                color: #000;
            }

            ul {
                list-style: disc;
                padding-left: 20px;
            }
        }
    </style>
</head>

<body>
    <h1>原生打印功能实现</h1>
    <button id="printButton">点击打印</button>

    <script>
        function createPrintFrame() {
            const frame = document.createElement('iframe')
            frame.className = 'vxe-table--print-frame'
            return frame
        }
        // function appendPrintFrame() {
        //     if (!printFrame.parentNode) {
        //         document.body.appendChild(printFrame)
        //     }
        // }


        function printContent() {


            // 打开一个新的窗口
            var printWindow = window.open('width=800,height=600');

            if (!printWindow) {
                alert('浏览器拦截了弹出窗口，请允许弹窗后重试。');
                return;
            }

            // 写入 HTML 内容和样式
            printWindow.document.open();
            printWindow.document.write(`<!DOCTYPE html>
        <html>
        <head>
          <title></title>
          <style>
            body {
              font-family: Arial, sans-serif;
              line-height: 1.5;
              margin: 20px;
            }
            h2 {
              color: #333;
            }
            ul {
              list-style: disc;
              padding-left: 20px;
            }
          </style>
        </head>`);
            printWindow.document.close();

            // 等待窗口加载完毕后触发打印
            printWindow.onload = function () {
                printWindow.print();
                printWindow.close();
            };
        }

        // 绑定按钮点击事件
        document.getElementById('printButton').addEventListener('click', printContent);
    </script>
</body>

</html>